<template>
    <div class="home-wrapper">
        <section class="hot-blocks">
            <div class="block">
                <span>影院热映</span>
            </div>
            <div class="block">
                <span>欧美新碟榜</span>
            </div>
            <div class="block">
                <span>豆瓣时间</span>
            </div>
            <div class="block">
                <span>使用豆瓣APP</span>
            </div>
        </section>
        <section v-for="item in recommend_list" :key="item.id" v-if="recommend_list.length">
            <layout01 :data="item" v-if="item.layout === 1"></layout01>
            <!-- <layout05 :data="item" v-else-if="item.layout === 5"></layout05> -->
        </section>
    </div>
</template>

<script>
import axios from 'axios'
import Layout01 from 'components/layout01'
import Layout05 from 'components/layout05'
export default {
    data() {
        return {
            recommend_list: []
        }
    },
    components: {
        Layout01,
        Layout05
    },
    methods: {
        _getData() {
            axios({
                method: 'get',
                url: '/api/v2/recommend_feed',
                params: {
                    alt: 'json',
                    loc_id: 108288,
                    udid: '9fcefbf2acf1dfc991054ac40ca5114be7cd092f',
                    for_mobile: 1,
                    next_date: '',
                    next_date: '',
                    next_date: ''
                }
            }).then( res => {
                console.log(res)
                this.recommend_list = res.data.recommend_feeds;
            }).catch( err => {
                console.log(err)
            } )
        }
    },
    created() {
        this._getData();
    }
}
</script>

<style lang="scss" scoped>
@import "common/scss/variable.scss";
@import "common/scss/mixins.scss";

.home-wrapper {
    // margin: 0 18px;
    padding-top: $header-height;
    .hot-blocks {
        font-size: $base-font-size;
        margin: 20px 18px 0;
        padding-top: 6px;
        @include clearfix;
        .block {
            float: left;
            width: 50%;
            text-align: center;
            padding: 3px;
            box-sizing: border-box;
            span {
                display: inline-block;
                padding: 12px 0;
                width: 100%;
                height: 100%;
                background-color: #f6f6f6;
                color: #494949;
                line-height: 20px;
                @include ellipse;
            }
        }
    }
}
</style>

